<template>
  <div class="time-line" v-show="showTimeLinePanel && yearMonthList.length>1">
    <el-row>
      <el-col :span="4">
        <div class="content" style="display:inline-block;">
          <img v-if="play" src="../images/newstop.png" title="暂停" @click="palyChange('play')" alt />
          <img v-else src="../images/newplay.png" title="播放" @click="palyChange('stop')" alt />
          <img src="../images/newpre.png" title="向前" @click="prevStep()" alt />
        </div>
      </el-col>
      <el-col :span="18">
        <div class="content">
          <el-slider
            v-model="currIndex"
            :step="1"
            :max="maxIndex"
            height="50px"
            show-stops
            :show-tooltip="false"
            @change="handleSlider"
          ></el-slider>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="content">
          <img src="../images/newnext.png" title="向后" @click="nextStep()" alt />
          <!-- 下边展示内容最长为 例如 2019年第4季度  -->
          <!-- <span class="year">{{showDataLines[currIndex]}}</span> -->
          <!-- <i class="close icon-font el-icon-close" @click="closeTimeLine"></i> -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// {{showDataLines[currIndex]}}
import { mapState, mapMutations, mapActions } from "vuex";
import * as macroAPI from "@/pages/macro/api/macro.js";
import axios from "axios";
import sgisSpatialQuery from "@/utils/map/sfgis.spatial.query";
export default {
  name: "time-line",
  components: {},
  data() {
    return {
      currIndex: 5,
      showTimeLine: true,
      minIndex: 0,
      maxIndex: 5,
      timer: null,
      dataLine: [],
      loadData: null,
      options: [
        {
          value: "选项1",
          label: "年度"
        },
        {
          value: "选项2",
          label: "季度"
        },
        {
          value: "选项3",
          label: "月度"
        }
      ],
      loadValue: { formatValue: {} }, //当时间轴没数据时传的默认数据
      value: "",
      dataLines: [],
      intervalTime: 5000,
      showDataLines: [] //格式化后的时间轴
    };
  },
  computed: {
    ...mapState({
      showTimeLinePanel: state => state.macro.showTimeLinePanel,
      resultConditions: state => state.macro.resultConditions,
      currentQuotaLayerData: state => state.macro.currentQuotaLayerData,
      unionQueryCondition: state => state.macro.unionQueryCondition,
      currentTime: state => state.macro.currentTime,
      currQuotaMetaData: state => state.macro.currQuotaMetaData,
      regionCodeArray: state => state.macro.regionCodeArray,
      currQuotaGroups: state => state.macro.currQuotaGroups,
      idenCode: state => state.macro.idenCode,
      periodType: state => state.macro.periodType,
      startTime: state => state.macro.startTime,
      yearMonthList: state => state.macro.yearMonthList,
      isDataList: state => state.macro.isDataList,
      reportType: state => state.macro.reportType,
      play:state => state.macro.play,
    })
  },
  mounted() {
    EventBus.$on("formateTableData-spatialAnalysis", this.formateTableData);
     EventBus.$on("timechange-awite", this.timeChange);
  },
  watch: {},
  methods: {
    formateTime(periods) {
      let type = this.reportType; //报表类型
      this.showDataLines = [];
      for (let i = 0; i < periods.length; i++) {
        if (type == "1") {
          //年报
          this.showDataLines.push(periods[i].split("-")[0] + "年");
        } else if (type == "2") {
          //月报
          this.showDataLines.push(
            periods[i].split("-")[0] + "年" + periods[i].split("-")[1] + "月"
          );
        } else if (type == "32" || type == "33") {
          //季度2//季度3
          this.showDataLines.push(
            periods[i].split("-")[0] +
              "年第" +
              periods[i].split("-")[1] +
              "季度"
          );
        } else {
          //半年
          this.showDataLines.push(
            periods[i].split("-")[0] +
              "年" +
              (periods[i].split("-")[1] == "1" ? "上半年" : "下半年")
          );
        }
      }
    },
    formateTableData(data) {
      this.loadData = data;
      this.currIndex = this.yearMonthList.length - 1;
      this.maxIndex = this.yearMonthList.length - 1;
      this.formateTime(this.yearMonthList);
    },

    unique(regioncode) {
      for (var i = 0; i < regioncode.length; i++) {
        for (var j = i + 1; j < regioncode.length; j++) {
          if (regioncode[i] == regioncode[j]) {
            //第一个等同于第二个，splice方法删除第二个
            regioncode.splice(j, 1);
            j--;
          }
        }
      }
      return regioncode;
    },
    handleSlider(currentIndex) {
      this.currIndex = currentIndex;
      if (this.isDataList.indexOf(this.yearMonthList[this.currIndex]) == -1) {
        this.$store.commit(
          "changeCurrentYearMonth",
          this.yearMonthList[this.currIndex]
        );
        EventBus.$emit("formateChangeCurrentData-spatialAnalysis", {
          formateData: this.loadValue
        });
        return false;
      } else {
        this.$store.commit(
          "changeCurrentYearMonth",
          this.yearMonthList[this.currIndex]
        );
        EventBus.$emit(
          "formateChangeCurrentData-spatialAnalysis",
          this.loadData
        );
      }
    },
    palyChange(type) {
      let self = this;
      if (type == "stop") {
        this.$store.commit("changePlay",true)
        this.timer = setInterval(this.fn, this.intervalTime);
      } else {
        clearInterval(this.timer);
        this.$store.commit("changePlay",false)
      }
    },
    fn() {
      if (this.play) {
        this.nextStep();
      }
    },
    //等待创建专题图完成再播放
    timeChange(status){
      if(this.play && status){
        clearInterval(this.timer);
        this.timer = setInterval(this.fn, this.intervalTime);
      }
    },
    prevStep() {
      if (this.currIndex != this.minIndex) {
        this.currIndex -= 1;
        if (this.isDataList.indexOf(this.yearMonthList[this.currIndex]) == -1) {
          this.$store.commit(
            "changeCurrentYearMonth",
            this.yearMonthList[this.currIndex]
          );
          EventBus.$emit("formateChangeCurrentData-spatialAnalysis", {
            formateData: this.loadValue
          });
          return false;
        }
      } else {
        this.currIndex = this.maxIndex;
        if (this.isDataList.indexOf(this.yearMonthList[this.currIndex]) == -1) {
          this.$store.commit(
            "changeCurrentYearMonth",
            this.yearMonthList[this.currIndex]
          );
          EventBus.$emit("formateChangeCurrentData-spatialAnalysis", {
            formateData: this.loadValue
          });
          return false;
        }
      }
      this.$store.commit(
        "changeCurrentYearMonth",
        this.yearMonthList[this.currIndex]
      );
      EventBus.$emit("formateChangeCurrentData-spatialAnalysis", this.loadData);
    },
    nextStep() {
      if (this.currIndex != this.maxIndex) {
        this.currIndex += 1;
        if (this.isDataList.indexOf(this.yearMonthList[this.currIndex]) == -1) {
          clearInterval(this.timer);
          if (this.play) {
            this.timer = setInterval(this.fn, this.intervalTime);
          }
          this.$store.commit(
            "changeCurrentYearMonth",
            this.yearMonthList[this.currIndex]
          );
          EventBus.$emit("formateChangeCurrentData-spatialAnalysis", {
            formateData: this.loadValue
          });
          return false;
        } else {
          clearInterval(this.timer);
          if (this.play) {
            this.timer = setInterval(this.fn, this.intervalTime);
          }
        }
      } else {
        this.currIndex = this.minIndex;
        if (this.isDataList.indexOf(this.yearMonthList[this.currIndex]) == -1) {
          this.$store.commit(
            "changeCurrentYearMonth",
            this.yearMonthList[this.currIndex]
          );
          EventBus.$emit("formateChangeCurrentData-spatialAnalysis", {
            formateData: this.loadValue
          });
          return false;
        }
      }
      this.$store.commit(
        "changeCurrentYearMonth",
        this.yearMonthList[this.currIndex]
      );
      EventBus.$emit("formateChangeCurrentData-spatialAnalysis", this.loadData);
    },
    closeTimeLine() {
      this.$store.commit("changeShowTimeLine", false);
    },
    getDataTime(time, startTime) {
      this.dataLine = [];
      for (let i = time.split("-")[0] - startTime; i >= 0; i--) {
        this.dataLine.push(`${time.split("-")[0] - i}-0`);
      }
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.time-line {
  position: absolute;
  bottom: 10px;
  right: 600px;
  width: 550px;
  height: 50px;
  z-index: 980;
  background: rgba(18, 90, 120, 0.5);
  .content {
    height: 38px;
    margin-top: 6px;
    line-height: 34px;
    position: relative;
    img {
      width: 27px;
      height: 27px;
      margin-left: 9px;
      vertical-align: middle;
      cursor: pointer;
    }
    .year {
      font-size: 1.4rem;
      color: #fff;
      //font-weight: bold;
      display: inline-block;
      width: 96px;
      text-align: center;
    }
    .close {
      position: absolute;
      top: -2px;
      right: 6px;
      font-size: 14px;
      color: #fff;
      cursor: pointer;
    }
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
.time-line {
  .el-slider__button {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(29, 156, 183, 1);
    background-color: rgba(29, 156, 183, 1);
    border-radius: 50%;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}
.content .el-slider__runway {
  background: rgba(255, 255, 255, 0.2);
}
.content .el-slider__bar {
  background: rgba(29, 156, 183, 1);
}
</style>
